<template>
  <div class="contact-container">
    <div class="contact-search"></div>
    <div class="contact-content">
      <div
        v-for="user in userList"
        :key="user.address"
        class="contact-content_item"
        @click="openChat(user)"
      >
        <div class="contact-content_item-avatar">
          <el-avatar shape="square" class="avatar" :src="photo" />
        </div>
        <div class="contact-content_item-user">
          <div class="user-name">{{ user.userName }}</div>
          <div class="user-address">{{ user.address }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import avatar from '@/assets/avatar.jpg'
import { ref } from 'vue'
defineOptions({
  name: 'ContactPerson'
})
defineProps({
  userList: {
    type: Array,
    default: () => []
  }
})

const photo = ref(avatar)

const emit = defineEmits(['openChatWindow'])

const openChat = user => {
  emit('openChatWindow', user)
}
</script>

<style lang="scss" scoped>
.contact-container {
  width: 180px;
  height: 100%;
  border-right: 1px solid #c4c4c4;
}
.contact-search {
  height: 50px;
}
.contact-content {
  border-top: 1px solid #c4c4c4;
  height: calc(100vh - 50px);
  overflow-y: auto;
  .contact-content_item {
    height: 65px;
    display: flex;

    .contact-content_item-avatar {
      width: 65px;
      height: 65px;
      padding: 10px;
      box-sizing: border-box;
      .avatar {
        height: 100%;
        width: 100%;
      }
    }
    .contact-content_item-user {
      width: calc(100% - 65px);
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;

      .user-name {
        font-size: var(--user-name-family-size);
      }
      .user-address {
        font-size: var(--user-address-family-size);
      }
    }
  }

  .contact-content_item:hover {
    background-color: #d8d8d8;
  }
}
</style>
